import React from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { SubNavMenu, SubNavItem, SubNavSubItem } from 'components/navListMenv'
import { Header, Image } from 'semantic-ui-react'

const OrgNav = ({ activeItem, link, org }) => {
  const orgName = org.owner_object.name
  const { avatar } = org.owner_object
  return (
    <SubNavMenu vertical tabular>
      <SubNavItem className="subnav top">
        <Header as="h2">
          <Image src={avatar} />
        </Header>
      </SubNavItem>
      <SubNavItem className="subnav section" name="" />
      {(org.role === 'owner' || org.role === 'admin') && (
        <React.Fragment>
          <SubNavSubItem
            className={activeItem === 'dashboard' ? 'subactive' : ''}
            onClick={() => link(`/org/${orgName}/dashboard`)}
          >
            <a>
              <span>仪表盘</span>
            </a>
          </SubNavSubItem>
          <SubNavSubItem
            className={activeItem === 'dataset' ? 'subactive' : ''}
            onClick={() => link(`/org/${orgName}/dataset`)}
          >
            <a>
              <span>数据集</span>
            </a>
          </SubNavSubItem>
          <SubNavSubItem
            className={activeItem === 'user' ? 'subactive' : ''}
            onClick={() => link(`/org/${orgName}/user`)}
          >
            <a>
              <span>用户</span>
            </a>
          </SubNavSubItem>
        </React.Fragment>
      )}
      <SubNavSubItem
        className={activeItem === 'project' ? 'subactive' : ''}
        onClick={() => link(`/org/${orgName}/project`)}
      >
        <a>
          <span>项目</span>
        </a>
      </SubNavSubItem>
    </SubNavMenu>
  )
}

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(OrgNav)
